<script>
/**
 * @desc 首页轮播图
 */

export default {
  name: 'home-banner',
  data: () => ({
    banners: [
      '/static/images/banner1.jpg',
      '/static/images/banner2.jpg',
      '/static/images/banner3.jpg',
      '/static/images/banner4.jpg'
    ]
  })
}
</script>

<template>
  <div class="home-banner">
    <swiper
      class="home-banner-swiper"
      circular
      indicator-dots
      autoplay
      indicator-color="rgba(255,255,255,0.5)"
      indicator-active-color="#ffffff"
    >
      <block v-for="(b,i) in banners" :key="i">
        <swiper-item>
          <img :src="b" class="banner-img" mode="aspectFill">
        </swiper-item>
      </block>
    </swiper>
  </div>
</template>

<style lang="scss">
.home-banner-swiper {
  width: 100%;
  height: 420rpx;

  .banner-img {
    width: 100%;
    height: 100%;
  }
}
</style>

